<template>
  <div class="product-detail-container">
    <div class="product-content">
      <!-- 左侧图片展示区 -->
      <div class="product-gallery">
        <el-carousel trigger="click" height="400px" class="product-carousel">
          <el-carousel-item
            v-for="(image, index) in product.images"
            :key="index"
          >
            <img :src="image" :alt="product.name" class="product-image" />
          </el-carousel-item>
        </el-carousel>
        <div class="image-thumbnails">
          <div
            v-for="(image, index) in product.images"
            :key="index"
            class="thumbnail"
            :class="{ active: currentImageIndex === index }"
            @click="currentImageIndex = index"
          >
            <img :src="image" :alt="product.name" />
          </div>
        </div>
      </div>

      <!-- 右侧商品信息区 -->
      <div class="product-info">
        <div class="product-header">
          <h1 class="product-name">{{ product.name }}</h1>
          <div class="product-tags">
            <el-tag
              v-for="tag in product.tags"
              :key="tag"
              :type="getTagType(tag)"
              size="small"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>

        <div class="product-meta">
          <div class="price-section">
            <span class="price-label">价格</span>
            <span class="current-price">¥{{ product.price.toFixed(2) }}</span>
            <span class="original-price" v-if="product.originalPrice">
              ¥{{ product.originalPrice.toFixed(2) }}
            </span>
          </div>
          <div class="sales-info">
            <span>销量 {{ product.sales }}</span>
            <span>收藏 {{ product.favorites }}</span>
          </div>
        </div>

        <div class="product-attributes">
          <div class="attribute-item">
            <span class="attribute-label">品牌</span>
            <span class="attribute-value">{{ product.brand }}</span>
          </div>
          <div class="attribute-item">
            <span class="attribute-label">用途</span>
            <span class="attribute-value">{{ product.usage }}</span>
          </div>
          <div class="attribute-item">
            <span class="attribute-label">适用人群</span>
            <span class="attribute-value">{{ product.role }}</span>
          </div>
        </div>

        <!-- 尺码选择 -->
        <div class="size-section">
          <div class="section-title">尺码</div>
          <div class="size-options">
            <el-radio-group v-model="selectedSize">
              <el-radio-button
                v-for="size in product.sizes"
                :key="size.value"
                :label="size.value"
                :disabled="!size.inStock"
              >
                {{ size.label }}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <!-- 数量选择 -->
        <div class="quantity-section">
          <div class="section-title">数量</div>
          <el-input-number v-model="quantity" :min="1" :max="99" size="large" />
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button
            type="primary"
            size="large"
            :icon="ShoppingCart"
            @click="addToCart"
          >
            加入购物车
          </el-button>
          <el-button
            type="danger"
            size="large"
            :icon="ShoppingBag"
            @click="buyNow"
          >
            立即购买
          </el-button>
          <el-button
            :type="isFavorite ? 'danger' : 'default'"
            size="large"
            :icon="Star"
            @click="toggleFavorite"
          >
            {{ isFavorite ? "已收藏" : "收藏" }}
          </el-button>
        </div>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="product-details">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="商品详情" name="details">
          <div class="details-content" v-html="product.details"></div>
        </el-tab-pane>
        <el-tab-pane label="规格参数" name="specs">
          <el-descriptions :column="2" border>
            <el-descriptions-item
              v-for="(spec, index) in product.specifications"
              :key="index"
              :label="spec.label"
            >
              {{ spec.value }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="用户评价" name="reviews">
          <div class="reviews-section">
            <!-- 评价统计 -->
            <div class="review-stats">
              <div class="rating">
                <span class="rating-score">{{ product.rating }}</span>
                <el-rate v-model="product.rating" disabled />
              </div>
              <div class="rating-breakdown">
                <!-- 评分分布 -->
              </div>
            </div>
            <!-- 评价列表 -->
            <div class="review-list">
              <!-- 用户评价内容 -->
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ShoppingCart, ShoppingBag, Star } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

// 商品数据
const product = reactive({
  id: 1,
  name: "Nike Air Max 270",
  price: 999.0,
  originalPrice: 1299.0,
  sales: 1000,
  favorites: 500,
  brand: "Nike",
  usage: "跑步",
  role: "男士",
  rating: 4.5,
  tags: ["新品", "热销"],
  images: [
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
    "https://example.com/image3.jpg",
  ],
  sizes: [
    { label: "39", value: "39", inStock: true },
    { label: "40", value: "40", inStock: true },
    { label: "41", value: "41", inStock: true },
    { label: "42", value: "42", inStock: false },
    { label: "43", value: "43", inStock: true },
  ],
  specifications: [
    { label: "产地", value: "中国" },
    { label: "材质", value: "织物+橡胶" },
    { label: "闭合方式", value: "系带" },
    { label: "适用场景", value: "运动、休闲" },
  ],
  details: `
    <h3>产品描述</h3>
    <p>这是一段详细的产品描述...</p>
    <img src="https://example.com/detail1.jpg" alt="详情图1">
    <img src="https://example.com/detail2.jpg" alt="详情图2">
  `,
});

// 状态管理
const currentImageIndex = ref(0);
const selectedSize = ref("");
const quantity = ref(1);
const isFavorite = ref(false);
const activeTab = ref("details");

// 添加到购物车
const addToCart = () => {
  if (!selectedSize.value) {
    ElMessage.warning("请选择尺码");
    return;
  }
  // TODO: 实现添加到购物车逻辑
  ElMessage.success("已添加到购物车");
};

// 立即购买
const buyNow = () => {
  if (!selectedSize.value) {
    ElMessage.warning("请选择尺码");
    return;
  }
  // TODO: 实现立即购买逻辑
  router.push({
    path: "/checkout",
    query: {
      productId: product.id,
      size: selectedSize.value,
      quantity: quantity.value,
    },
  });
};

// 收藏商品
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
  ElMessage.success(isFavorite.value ? "收藏成功" : "已取消收藏");
};

// 标签样式
const getTagType = (tag) => {
  switch (tag) {
    case "新品":
      return "success";
    case "热销":
      return "danger";
    default:
      return "";
  }
};
</script>

<style scoped>
.product-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.product-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.product-gallery {
  position: relative;
}

.product-carousel {
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-thumbnails {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.thumbnail {
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.thumbnail.active {
  border-color: var(--el-color-primary);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-header {
  margin-bottom: 20px;
}

.product-name {
  font-size: 24px;
  margin-bottom: 10px;
}

.product-tags {
  display: flex;
  gap: 8px;
}

.price-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.price-label {
  font-size: 14px;
  color: #666;
}

.current-price {
  font-size: 28px;
  color: var(--el-color-danger);
  font-weight: bold;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
}

.sales-info {
  display: flex;
  gap: 20px;
  color: #666;
}

.product-attributes {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
}

.attribute-item {
  display: flex;
  margin-bottom: 10px;
}

.attribute-label {
  width: 80px;
  color: #666;
}

.section-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.size-options {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 16px;
  margin-top: 30px;
}

.product-details {
  margin-top: 40px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.details-content {
  padding: 20px 0;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .product-content {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
  }
}
</style> 